<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		div {
			width: 300px;
			height: 300px;
			background-color: #ff3040;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<p>这是测试文件!</p>
	<div>hello world</div>
	<h1>哈哈哈，又添加了一段文字</h1>
	<span>我是小明，我马上就要冲突了，哈哈哈哈哈</span>
	<input type="text" placeholder="请填写你的名字">
	<ul id="box">
		<li>香蕉</li>
		<li>苹果</li>
		<li>荔枝</li>
	</ul>
	<script>
		var box = document.getElementById('box')
		var lis = document.getElementsByTagName('li')
		box.onmouseover = function(e){
			e.target.style.backgroundColor = '#ff3040'
		}
		box.onmouseout = function(e){
			e.target.style.backgroundColor = '#fff'
		}
	</script>
</body>
</html>